<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 320px;
      display: flex;
      flex-direction: column;
      margin: 50px auto;
      border: 3px solid #333;
    }

    .box > ul {
      height: 60px;
      display: flex;
    }

    .box > ul > li {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 30px;
      color: #fff;
      background-color: skyblue;
      cursor: pointer;
    }

    .box > ul > li.active {
      background-color: orange;
    }

    .box > ol {
      flex: 1;
      position: relative;
    }

    .box > ol > li {
      width: 100%;
      height: 100%;
      background-color: purple;
      font-size: 50px;
      color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }

    .box > ol > li.active {
      display: block;
    }
  </style>
</head>
<body>

  <div class="box" id="box1">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>

  <div class="box" id="box2">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>

  <div class="box" id="box3">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>


  <div class="box" id="box4">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ol>
  </div>

  <div class="box" id="box5">
    <ul>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>

    </ul>
    <ol>
      <li class="active">1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>

    </ol>
  </div>


  <script>
    /*
      选项卡 - 面向对象版本

      思想:
        + 面向过程
          => 考虑获取那些元素
          => 给谁绑定事件
          => 给谁添加或者取消类名
        + 面向对象
          => 找到一个生产选项卡的 "机器"(发现没有, 自己写一个能生产选项卡的 "机器")
          => 用这个 "机器" 生产一个选项卡对象
          => 打开页面效果实现

      分析: 选项卡对象需要包含哪些 属性 和 方法
    // 手工耿 


        元素   按钮  内容
        给每个按钮  绑定点击事件  让按钮高亮  内容显示  

        属性:  按钮和内容 
        方法:  绑定事件  修改类名 



        最终的结果:


        {
            ele:#box1,
            btns:[1,2,3,4]
            box:[1,2,3,4]

        }



        {
            ele:#box2,
            btns:[1,2,3,4]
            box:[1,2,3,4]
        }

        把  方法:  绑定事件  修改类名 写在 构造函数的原型上 
        避免每次实例化对象  都开辟一个新的函数空间  


    */

        function MyTabs(selector){
            // 哪个div 
            this.ele = document.querySelector(selector);
            // 每个选项卡的按钮 伪数组
            this.btns = this.ele.querySelectorAll('ul > li');
            // 每个选项卡的内容 伪数组
            this.boxs = this.ele.querySelectorAll('ol > li');

            this.init(); //自己调用自己的方法
        }
        
        MyTabs.prototype.init = function(){
            // 给每个按钮绑定点击事件
            for(let i=0;i<this.btns.length;i++){
                // 事件处理函数是 批量移出所有的高亮 隐藏所有的内容
                // this.btns[i].addEventListener('click',()=>{
                //     for(let j=0;j<this.btns.length;j++){
                //         this.btns[j].classList.remove('active');
                //         this.boxs[j].classList.remove('active');
                //     }

                //     this.btns[i].classList.add('active');
                //     this.boxs[i].classList.add('active');
                // });
                var data = this.btns;
                var boxs = this.boxs;
                this.btns[i].onclick = function(){
                    // alert(this) 这里的this代表 li 
                    // this.btns 就会报错 
                    // 解决方案 提前拿一个变量 保存所有的按钮 所有的内容 
                    // for(let j=0;j<this.btns.length;j++){
                    //     this.btns[j].classList.remove('active');
                    //     this.boxs[j].classList.remove('active');
                    // }

                    // this.btns[i].classList.add('active');
                    // this.boxs[i].classList.add('active');

                    //解决方案

                    for(let j=0;j<data.length;j++){
                        data[j].classList.remove('active');
                        boxs[j].classList.remove('active');
                    }

                    data[i].classList.add('active');
                    boxs[i].classList.add('active');
                }
            }
        }



        var obj1 = new MyTabs('#box1');
        // obj1.init();

        var obj2 = new MyTabs('#box2');

        var obj3 = new MyTabs('#box3');

        var obj4 = new MyTabs('#box4');

        var obj5 = new MyTabs('#box5');


    </script>


</body>

</html>